<template>
	<view>
		<view class="mine">
			<!-- 个人信息 -->
			<view class="mine_card atlin flew" @click="mineBtn">
				<image  :src="uFrom.userImgUrl"></image>
				<view>
					<view class="mine_name">{{uFrom.userName}}</view>
					<view class="color66">{{uFrom.mobile}}</view>
				</view>
			</view>
			<!-- 列表 -->
		    <view class="marTop45">
				<view class="dis mine_line " @click.stop="skip(item.url,index)" v-for="(item,index) in list" :key="index">
					<view  class="flew atlin">
						<image class="icon " :src="item.imgURL"></image>
						<view>{{item.name}}</view>
					</view>
					<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
				</view>
			</view>
			<!-- <view class="dis mine_line">
				<view class="flew atlin">
					<image style="width: 45rpx;height: 45rpx;" src="../../static/mine/5.png"></image>
					<button open-type="contact"  class="contacButton">联系客服</button>
				</view>
				<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
			</view> -->
			<!-- 客服弹窗 -->
			<u-popup v-model="serve" mode="center" :closeable="true" close-icon-color="#ffffff">
				<view class="mine_tan">
					<view class="flew kefu atlin">
						<view style="
							width: 50rpx; 
							height: 50rpx;
							background-color: #ff6600;
							border-radius: 50%; 
							text-align: center;
							margin-right: 20rpx;
							line-height: 48rpx;">
							<u-icon name="email" size="30" color="#ffffff"></u-icon>
						</view>
						<text style="font-weight: bold;">联系客服</text>
					</view>
					<view class="mobile">{{mobile}}</view>
					<view class="dis">
						<u-button class="btn" @click="serve = false">取消</u-button>
						<button class="btn bei" @click="call(mobile)">拨打</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{imgURL:require('@/static/mine/1.png'),name:'订单列表',url:'pages/mine/orderList/orderList'},
					{imgURL:require('@/static/mine/2.png'),name:'优惠券',url:'pages/mine/coupons/coupons'},
					{imgURL:require('@/static/mine/9.png'),name:'我的钱包',url:'pages/mine/wallet/wallet'},
					{imgURL:require('@/static/mine/3.png'),name:'我的发票',url:'pages/mine/invoices/invoices'},
					{imgURL:require('@/static/mine/4.png'),name:'邀请有礼',url:'pages/mine/invited/invited'},
					{imgURL:require('@/static/mine/5.png'),name:'联系客服'},
					{imgURL:require('@/static/mine/6.png'),name:'意见反馈',url:'pages/mine/feedback/feedback'},
					{imgURL:require('@/static/mine/7.png'),name:'关于我们',url:'pages/mine/about/about'},
					{imgURL:require('@/static/mine/8.png'),name:'常见问题',url:'pages/mine/staple/staple'},
					{imgURL:require('@/static/mine/10.png'),name:'设置',url:'pages/mine/set/set'}
				],
				//用户信息
				uFrom:{
					userName:'王大转',
					mobile:'18380066600',
					userImgUrl:'https://pic3.zhimg.com/80/v2-5d8bb66efce44939995c5fc84fc98271_720w.jpg'
				},
				mobile:'18380066600',
				//客服弹窗
				serve:false
			}
		},
		methods: {
			//拨打电话
			call(i){
				uni.makePhoneCall({
					phoneNumber: i,
					success: (res) => {
						console.log('拨打成功')
					},
					fail: (err) => {
						console.log('拨打失败')
					}
				})
			},
			//个人信息跳转
			mineBtn(){
				this.$mHelper.to('pages/mine/personal/personal',true)
			},
			//列表跳转对应页面
			skip(url,i) {
				this.$mHelper.to(url,true)
				if(i==5){
					this.serve = true
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		width: 48%;
	}
	.mobile{
		font-size: 35rpx;font-weight: bold;line-height: 140rpx;
	}
	.kefu{
		line-height: 80rpx;border-bottom: 1rpx solid #e6e6e6;
		justify-content: center;
		display: flex;
		
	}
	.bei{
		background: #FF6600;font-size: 30rpx; height: 80rpx;color: #FFFFFF;
	}
	.mine_tan{
		width: 600rpx;
		background-color: #FFFFFF;
		padding: 25rpx;
		text-align: center;
		border-radius: 15rpx;
	}
	.icon{
		width: 45rpx;
		height: 45rpx;
		margin-right: 20rpx;
	}
	.mine{
		padding: 25rpx;
		font-size: 32rpx;
		color: #333333;
		.mine_line{
			line-height: 88rpx;
			border-bottom: 1rpx solid #f4f4f4;
		}
		.mine_card{
			box-shadow: 0 4px 8px 0 rgba(121, 121, 121, 0.2);
			transition: 0.3s;
			border-radius: 8rpx;
			padding:36rpx 25rpx;
			image{
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}
			.mine_name{
				font-size: 35rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}
	.contacButton {
	  background-color: #ffffff;
	  width: 170rpx;
	  padding: 0;
	  margin: 0;
	  font-size: inherit;
	  color: #333333;
	}
	 
	.contacButton::after {
	  border: #FFF solid;
	}
	.icon-right {
	  float: right;
	  color: #CCC;
	}
	.contacButtonView {
	  padding: 12rpx 20rpx 12rpx 60rpx;
	  color: #333;
	}
</style>
